(function (window) {
  'use strict';

  // Your starting point. Enjoy the ride!
  // 本地存储
  const TODO_KEY = 'todos-vue';
  // 声明对象
  let todoStorage = {
    // 读取本地存储数据
    get() {
      return JSON.parse(localStorage.getItem(TODO_KEY)) || [];
    },
    set(todos) {
      //console.log(JSON.stringify(todos));
      localStorage.setItem(TODO_KEY, JSON.stringify(todos));
    }
  }
  // 设置用于筛选不同类别事项的函数，并统一存储
  let filters = {
    all(todos) {
      return todos;
    },
    active(todos) {
      return todos.filter(todo => !todo.completed);
    },
    completed(todos) {
      return todos.filter(todo => todo.completed);
    }
  }
  const app = new Vue({
    el: '#app',
    data: {
      todos: todoStorage.get(),
      //存储所有事项信息
      /*
      todos: [{
      		id: 1,
      		title: '学习vue',
      		completed: false
      	},
      	{
      		id: 2,
      		title: '复习js',
      		completed: false
      	},
      	{
      		id: 3,
      		title: '看书',
      		completed: true
      	}
      ],*/
      newTodo: '',
      editingTodo: null,
      titleBeforeEdit: '',
      todoType: 'all'
    },
    // 自定义指令
    // 用于自动获取焦点
    directives: {
      'todo-focus': (el, binding) => {
        if (binding.value) {
          el.focus();
        }
      }
    },
    methods: {
      // 用于item items的切换
      pluralize() {
        return this.remaining === 1 ? 'item' : 'items';
      },
      // 用于新增事项
      addTodo() {
        let value = this.newTodo;
        if (!this.newTodo) {
          return;
        }
        this.todos.push({
          id: this.todos.length + 1,
          title: value,
          completed: false
        });
        this.newTodo = '';
      },
      // 删除功能：用于删除单个事件
      removeTodo(todo) {
        let index = this.todos.indexOf(todo);
        this.todos.splice(index, 1);
      },
      // 已完成事项的删除操作
      removeCompleted() {
        this.todos = this.todos.filter(todo => {
          return !todo.completed;
        });
      },
      // 编辑 保存相关信息
      editTodo(todo) {
        this.editingTodo = todo;
        this.titleBeforeEdit = todo.title;
      },
      // 点击esc取消编辑，还原事项内容与状态
      cancelEdit(todo) {
        this.editingTodo = null;
        todo.title = this.titleBeforeEdit;
      },
      //事项编辑
      editDone(todo) {
        // 检测
        if (!this.editingTodo) return;
        this.editingTodo = null;
        todo.title = todo.title.trim();
        if (!todo.title) {
          this.removeTodo(todo);
        }
      }
    },
    // 计算属性
    computed: {
      // 筛选出完成的
      remaining() {
        return this.todos.filter(todo => !todo.completed).length;
      },
      // 全选
      allDone: {
        get() {
          return this.remaining === 0;
        },
        set(value) {
          this.todos.forEach(todo => {
            todo.completed = value;
          });
        }
      },
      // 根据状态显示不同的数据
      filteredTodo() {
        return filters[this.todoType](this.todos);
      }
    },
    watch: {
      todos: {
        deep: true,
        handler: todoStorage.set
      }
    }
  });
})(window);